﻿@model OrderListModel
<style type="text/css">
    .layui-table-cell {
        height: auto;
        padding: 0;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form  layui-form-pane layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-row" style="margin: 5px;">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">开始时间</label>
                            <div class="layui-input-block" style="width:70%;">
                                <input class="layui-input" name="StartDate" id="StartDate" placeholder="请输入开始时间" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-block" style="width:70%;">
                                <input class="layui-input" name="EndDate" id="EndDate" placeholder="请输入结束时间" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row" style="margin: 5px;">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">订单状态</label>
                            <div class="layui-input-block" style="width:70%;">
                                <u-select asp-for="OrderStatusId" asp-items="Model.AvailableOrderStatuses" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">配送状态</label>
                            <div class="layui-input-block" style="width:70%;">
                                <u-select asp-for="ShippingStatusId" asp-items="Model.AvailableShippingStatuses" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="LAY-app-contlist-search">搜索</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-order-list" lay-filter="LAY-order-list"></table>
            <script type="text/html" id="layuiadmin-app-cont-tagsbar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">查看</a>
            </script>
        </div>
    </div>
</div>

<script type="text/html" id="goodsTpl">
    <table class="layui-table" lay-data="skin:row" style="width:100%;display:inline-table;">
        <colgroup>
            <col>
            <col width="75">
            <col width="100">
        </colgroup>
        <thead>
            <tr>
                <th style="text-align:left;padding-left:10px;" colspan="3">订单编号：{{d.Id}} &nbsp;&nbsp;&nbsp;&nbsp; 创建时间: {{layui.util.toDateString(d.CreateTime,'yyyy年MM月dd日 HH:mm') }} </th>
            </tr>
        </thead>
        <tbody>
            {{# layui.each(d.Items,function(index,item){}}
            <tr>
                <td align="left" style="padding-left:10px;"><img src="{{item.PictureThumbnailUrl}}" /> {{item.GoodsName}} {{item.AttributeInfo}}</td>
                <td align="center" style="width:75px;">SKU {{item.Sku||''}}</td>
                <td align="center">{{item.UnitPrice}}x{{item.Quantity}}</td>
            </tr>
            {{#})}}
        </tbody>
        {{#if(d.IsShippable||d.Remark!=null){}}
        <tfoot>
            {{#if(d.IsShippable){}}
            <tr><td colspan="3">&nbsp;&nbsp; 地址：{{d.ShippingContacts}}</td></tr>
            {{#};}}
            <tr><td colspan="3">&nbsp;&nbsp;{{d.Remark||''}}</td></tr>
        </tfoot>
        {{#};}}
    </table>
</script>
<script type="text/html" id="priceTpl">
    <div class="layui-col-md12">
        <div class="layui-item"><strong>订单金额：{{d.OrderTotal}}</strong></div>
        <div class="layui-item" style="font-size:14px;">商品小计：{{d.OrderSubtotal}}</div>
        <div class="layui-item" style="font-size:14px;">配送费：{{d.OrderShipping}}</div>
    </div>
</script>

<script>
    layui.use(['index', 'table'], function () {
            var index = layer.load(2, { shade: false });
            var table = layui.table
                , form = layui.form;

        //分类管理
        table.render({
            elem: '#LAY-order-list'
            , method: 'post'
            , url: '@Html.Raw(Url.Action("OrderList", "Order"))' //模拟接口
            , height: 'full-140'
            , loading:true
            , page: true
            , limit: 30
            , limits: [30,50,100]
            , cols: [[
                { field: 'Id', title: '订单信息', templet: '#goodsTpl', minWidth: 150, align: 'center' }
                , { field: 'OrderStatus', title: '状态', align: 'center', width: 100 }
                , { field: 'OrderTotal', title: '价格', templet: '#priceTpl', width: 160, align: 'center'  }
                , { title: '操作', width: 100, align: 'center', toolbar: '#layuiadmin-app-cont-tagsbar' }
            ]]
            , id: 'testReload'
            , text: { none: '一条数据也没有^_^' }
            , done: function () {
                layer.close(index);
            }
            });

        layui.form.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: field
            }, 'data');
        });

        //监听工具条
        table.on('tool(LAY-order-list)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除此订单？', function (index) {
                    obj.del();
                    $.post('@Url.Action("Delete")', { id: obj.data.Id });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                var tr = $(obj.tr);
                var index = layer.open({
                    title: '编辑'
                    , type: 2
                    , shade: 0.2
                    , maxmin: true
                    , shadeClose: true
                    , area: ['100%', '100%']
                    , content: '@Url.Action("Edit")?id=' + data.Id
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });

        var $ = layui.$, active = {}
        $('.layui-btn.layuiadmin-btn-tags').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>



